import React from 'react';

import {connect} from 'dva';
import {Row, Col, Carousel} from 'antd'
import {TopLayout, FormattedMessage, Line, LinkItem} from '../../components/index';

import mainStyle from '../../assets/css/main.css';
import style from './index.css';
import {classHelper} from '../../utils/class';
import CityPicker from './cityPicker';
import {introduce, plain_place, evaluate, enterprise_members} from '../../assets/data';

class IndexPage extends React.Component {
  constructor() {
    super();
    this.state = {
      gridBlockOrders1: [0, 1, 2, 3],
      gridBlockOrders2: [2, 3, 0, 1],
      gridBlockOrders3: [0, 1, 2, 3],
      introduceBannerPage: 0,
      slickGoTo: 0,
      memberSlickGoTo: 0,
      memberBannerPage: 0,
    }
  }

  componentDidMount() {
    window.addEventListener('resize', this.onResize.bind(this));
    this.onResize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize.bind(this));
  }

  onResize(e) {
    //786 992 1200 1600
    const windowWidth = window.innerWidth;
    if (windowWidth >= 992) {
      this.setState({
        gridBlockOrders1: [0, 1, 2, 3],
        gridBlockOrders2: [2, 3, 0, 1],
        gridBlockOrders3: [0, 1, 2, 3],
      })
    } else {
      this.setState({
        gridBlockOrders1: [0, 3, 2, 1],
        gridBlockOrders2: [0, 2, 1, 0],
        gridBlockOrders3: [0, 3, 2, 1],
      })
    }

  }

  renderIntroduce() {
    const {gridBlockOrders1, gridBlockOrders2, gridBlockOrders3} = this.state;
    let elms = [];
    let gridBlockOrders = [gridBlockOrders1, gridBlockOrders2, gridBlockOrders3];
    for (let index = 0; index < 3; index++) {

      elms.push(<Row className={style.grid} key={index}>
        <Col xl={6} lg={6} md={6} sm={12} xs={24} order={gridBlockOrders[index][0]}
             className={classHelper([style.blockGrid])}
             style={{paddingLeft: '2rem', fontSize: '1.5rem'}}>
          <FormattedMessage message={introduce[index * 2].title}
                            fontWeight={500}
                            fontSize='2.5rem'
                            style={{marginBottom: '1rem'}}/>
          <FormattedMessage
            message={introduce[index * 2].text}
          />
        </Col>
        <Col xl={6} lg={6} md={6} sm={12} xs={24} order={gridBlockOrders[index][1]}
             className={classHelper([style.blockGrid])} style={{paddingLeft: '2rem', fontSize: '1.5rem'}}>
          <FormattedMessage message={introduce[index * 2 + 1].title}
                            fontWeight={500}
                            fontSize='2.5rem'
                            style={{marginBottom: '1rem'}}
          />
          <FormattedMessage
            message={introduce[index * 2 + 1].text}
          />

        </Col>
        <Col xl={6} lg={6} md={6} sm={12} xs={24} order={gridBlockOrders[index][2]}
             className={style.blockGrid}>
          <img src={introduce[index * 2].image} alt=""
               style={{width: '100%', height: '100%'}}/>
        </Col>
        <Col xl={6} lg={6} md={6} sm={12} xs={24} order={gridBlockOrders[index][3]}
             className={style.blockGrid}>
          <img src={introduce[index * 2 + 1].image} alt=""
               style={{width: '100%', height: '100%'}}/>
        </Col>
      </Row>)
    }
    return elms;
  }

  renderIntroduceBanner() {
    return introduce.map((item, index) => {
      return (
        <div key={index} className={style.introduceItem}>
          <img src={item.image} alt=""/>
          <div className={style.blockGrid}>
            <FormattedMessage message={item.title}
                              fontWeight={500}
                              fontSize='2.5rem'
                              style={{marginBottom: '1rem'}}
            />
            <FormattedMessage
              message={item.text}
            />
          </div>
        </div>
      )
    })
  }

  renderPageControll() {
    const {introduceBannerPage} = this.state;
    return (
      <div className={style.pageCtl}>
        {introduce.map((item, index) => (
          <div className={classHelper([style.dots, introduceBannerPage === index ? style.active : ''])} key={index}
               onClick={this.changeIntroduceBannerPage.bind(this, index)}/>))}
      </div>
    )
  }

  renderMemberPageControll() {
    const {memberBannerPage} = this.state;
    return (
      <div className={style.pageCtl} style={{bottom: '1.5rem'}}>
        {evaluate.map((item, index) => (
          <div className={classHelper([style.dots, memberBannerPage === index ? style.active : ''])} key={index}
               onClick={this.changeMemberBannerPage.bind(this, index)}/>))}
      </div>
    )
  }

  rednerPlainAndPlace() {
    return plain_place.map((item, index) => {
      return (
        <Col key={index} xl={12} lg={12} md={12} sm={24} xs={24}
             style={{backgroundImage: `url(${item.image})`,}}
             className={classHelper([style.blockGrid, style.plain])}>
          <FormattedMessage message={item.title}/>
          <FormattedMessage message={item.sub}/>
          <Line width='6rem' height='0.5rem' color='white' style={{margin: '1.5rem 0'}}/>
          <FormattedMessage message={item.content}/>
          <a href="#" className={style.seeAll}>查看所有{item.type}</a>
        </Col>
      )
    })
  }

  changeIntroduceBannerPage(slickGoTo) {
    this.setState({slickGoTo})
  }

  changeMemberBannerPage(memberSlickGoTo) {
    this.setState({memberSlickGoTo})
  }

  renderMember() {
    return evaluate.map((item, index) => {
        return (
          <Col key={index} xl={6} lg={6} md={12} sm={0} xs={0}>
            <div className={classHelper([style.member])}>
              <img src={item.image} alt=""/>
              <FormattedMessage message={item.name}/>
              <FormattedMessage message={item.identity}/>
              <FormattedMessage message='-'/>
              <FormattedMessage message={`“${item.content}“`}/>
            </div>
          </Col>
        )
      }
    )
  }

  renderMemberBanner() {
    return evaluate.map((item, index) => {
        return (
          <div key={index}>
            <div className={classHelper([style.blockGrid, style.member])} key={index}>
              <img src={item.image} alt=""/>
              <FormattedMessage message={item.name}/>
              <FormattedMessage message={item.identity}/>
              <FormattedMessage message='-'/>
              <FormattedMessage message={`“${item.content}“`}/>
            </div>
          </div>
        )
      }
    )
  }


  renderEnterpriseMembers() {
    return enterprise_members.map((item, index) => (
      <Col key={index} xs={12} sm={12} md={6} lg={6} xl={6}
           className={classHelper([style.blockGrid, style.member])}>

        <img src={item.image} alt=""/>

      </Col>
    ))
  }

  render() {
    return (
      <TopLayout theme='transparent' containerClassName={style.container}>
        <div className={style.header}>
          <div className={style.headerContainer}>
            <div className={style.row}>

              <FormattedMessage message="我们致力于人性化工作"
                                fontSize='6rem'/>


              <FormattedMessage message="在我们全球办公场地网络中，重新引入日常的面对面合作、灵感激发和慷慨氛围。"
                                fontSize='2rem'/>

              <div>
                <Line width='50px' height='0.3rem' color="#fff"/>
                <FormattedMessage message="寻找专属办公室或共享工位"
                                  fontSize='2rem'/>
                <CityPicker/>
                <FormattedMessage message={<span>想要与我们合作，量身定制专属楼层或建筑？点此了解更多<strong><a
                  href="#"><span>了解更多</span></a></strong>相关信息</span>}
                                  color='white'
                                  fontSize='2rem'
                                  className={style.moreMessage}/>

              </div>
            </div>
          </div>
        </div>
        <div className={style.section}>
          <div className={classHelper([style.hPadding_section])} style={{height: '80vh'}}>
            <Row className={classHelper([mainStyle.full, style.baseCol_welcom, style.welcome])} type='flex'
                 align='middle'
                 gutter={50}>
              <Col span={9} className={style.baseCol_circleHero}>
                <img src={require("../../assets/images/b2ffb39992f8ee12974a91d4589df01c82ac443b.jpg")} alt=""
                     className={style.baseCol_circleHero}/>
              </Col>
              <Col span={14} style={{color: 'black', fontSize: '1.5rem', fontWeight: 'normal'}}>
                <FormattedMessage message="还记得您工作的初衷吗？"
                />
                <FormattedMessage message="欢迎来到MARKSPACE"
                                  fontSize='4rem'
                                  fontWeight={500}
                />
                <Line width='4rem' height="0.3rem" color="#000" style={{marginBottom: '1rem'}}/>
                <FormattedMessage message="寻找生活的新方式，不仅是为了谋生" style={{lineHeight: '2rem', marginBottom: '1rem'}}/>
                <FormattedMessage
                  message="WeWork致力于构建全球工作场地网络，助力公司和员工共同成长。我们将冰冷的建筑转化为富有创造力、专注力和相互联系的多元环境。这里不仅是绝佳的工作和思考场所，更是向着更加人性化工作环境的一种转变。我们相信首席执行官们将相互启发，而办公室也可以像家一样舒适。当我们找到了工作的真正意义所在，周一将变得无比值得期待。"/>
              </Col>

            </Row>
          </div>
          <Row className={classHelper([style.grid, style.hPadding_section])}>
            <Col xl={6} lg={6} md={6} sm={12} xs={24}
                 className={classHelper([style.blockGrid, style.firstBlockGrid])} style={{paddingLeft: '2rem'}}>
              <FormattedMessage message="专为深度思考而设计"
                                fontSize='1rem'/>
              <FormattedMessage message="摆脱定势束缚"
                                fontSize='4rem'/>
              <Line width='4rem' height="0.3rem" color="#fff"/>
            </Col>
            <Col xl={6} lg={6} md={6} sm={12} xs={24} className={style.blockGrid}>
              <img src={require('../../assets/images/a5d8e2451d4173fb8af4af8e375fe27ad9d77971.jpg')} alt=""
                   style={{width: '100%', height: '100%'}}/>
            </Col>
            <Col xl={12} lg={12} md={12} sm={24} xs={24} className={style.blockGrid}
                 style={{paddingLeft: '2rem', color: 'black', fontSize: '1.5rem', fontWeight: 'normal'}}>
              <FormattedMessage message="作为一种体验的空间"
                                fontWeight={500}
                                fontSize='2.5rem'
                                style={{marginBottom: '1rem'}}
              />
              <FormattedMessage
                message="工作的性质正在改变---招聘、人才保留、创新和生产力领域的员工现在不单只依靠咖啡来维持活性，瑜伽也可以；除了打印机等电子设施，工作中的艺术氛围也很重要。WeWork通过全新的设计、活跃的社区服务以及吸引人的会员福利，为各种规模的公司重新定义员工体验。"
                style={{marginBottom: '1rem'}}
              />
              <FormattedMessage
                message={<a style={{borderBottom: '0.3rem solid #000', fontWeight: '500'}} href="#">MARKSPACE
                  特色</a>}/>
            </Col>
          </Row>
          <Row className={classHelper([style.grid, style.hPadding_section])}>
            <Col xl={24} lg={24} md={24} sm={24} xs={0}>
              {this.renderIntroduce()}
            </Col>
            <Col xl={0} lg={0} md={0} sm={0} xs={24} style={{position: 'relative'}}>
              <Carousel autoplay dots={false}
                        draggable
                        slickGoTo={this.state.slickGoTo}
                        afterChange={(introduceBannerPage) => {
                          this.setState({
                            introduceBannerPage
                          })
                        }}>
                {this.renderIntroduceBanner()}
              </Carousel>
              {this.renderPageControll()}
            </Col>
          </Row>
          <Row className={classHelper([style.grid, style.hPadding_section])} type='flex'>
            {this.rednerPlainAndPlace()}
          </Row>
          <Row style={{fontSize: '1.5rem'}} className={classHelper([style.hPadding_section])}>
            <p>#WeAreWeWork</p>
            <h1 style={{fontSize: '4rem', marginBottom: '0.5rem'}}>来自会员最真实的反馈</h1>
            <Line color='black' width='4rem' height='0.5rem'/>
            <p style={{marginTop: '1rem'}}>会员评价</p>
          </Row>
          <Row className={classHelper([style.grid, style.hPadding_section])} gutter={10}>
            {this.renderMember()}
            <Col xl={0} lg={0} md={0} sm={24} xs={24}>
              <Carousel autoplay dots={false} style={{position: 'relative'}}
                        draggable
                        slickGoTo={this.state.memberSlickGoTo}
                        afterChange={(memberBannerPage) => {
                          this.setState({
                            memberBannerPage
                          })
                        }}>
                {this.renderMemberBanner()}
              </Carousel>
              {this.renderMemberPageControll()}
            </Col>
          </Row>
          <Row style={{fontSize: '1.5rem'}} className={classHelper([style.hPadding_section])}>
            <FormattedMessage className={style.formattedMessage} message='ENTERPRISE MEMBERS' color='black'
                              fontWeight='bold' fontSize='2rem' style={{margin: '1rem 0'}}/>
          </Row>
          <Row gutter={20}
               className={classHelper([style.grid, style.hPadding_section])}>
            <div className={style.enterprise}>
              {this.renderEnterpriseMembers()}
            </div>
          </Row>

          <Row gutter={80}>
            <Col span={14}>
              <div style={{borderBottom: '1px solid #efefef'}}>
                <LinkItem arrow href="#" text="全部办公地点"/>
              </div>
              <Row>
                <Col span={6}>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                </Col>
                <Col span={6}>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                </Col>
                <Col span={6}>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                  <LinkItem href="#" text="全部办公地点"/>
                </Col>
              </Row>

            </Col>
            <Col span={10}>
              <h1>留下你的电邮，获取WeWork最新动态!</h1>
              <form action="#">
                <div style={{display: 'flex'}}>
                  <input type="text"/>
                  <a href="#">
                    <span>提交</span>
                  </a>
                </div>
                <div>
                  <select name="lau" value={1}>
                    <option value="0">English</option>
                    <option value="1">中文简体</option>
                  </select>
                </div>
              </form>
            </Col>
          </Row>
          <footer>
            <Row>
              <Col style={{display: 'flex'}} span={16}>
                <address>
                  <span>WeWork HQ,115 W 18th St., New York, NY 1001</span>
                </address>
                <LinkItem href="tel:139-xxx-xxx" text="全部办公地点"/>
                <LinkItem href="#" text="隐私"/>
                <LinkItem href="#" text="条款"/>
              </Col>
              <Col>

              </Col>

            </Row>
          </footer>
        </div>

      </TopLayout>
    );
  }
}

IndexPage.propTypes = {};

export default connect()(IndexPage);
//Knockout 49 A", "Knockout 49 B", Impact, "Apercu", "Calibri", "Roboto", "Helvetica", sans-serif
